<div ng-controller="RegistrationController">
    <script type="text/ng-template" id="attribute-details.html">
        <table class="table table-bordered">
            <tr>
                <td class="bold">{{'description' | translate}}</td>
                <td>{{content.displayDescription ? (content.displayDescription ? content.displayDescription : content.description) : 'not_available' | translate}}</td>
            </tr>
        </table>
    </script>
    
    <script type="text/ng-template" id="dataelement-details.html">
        <table class="table table-bordered">
            <tr>
                <td class="bold">{{'description' | translate}}</td>
                <td>{{content.displayDescription ? content.displayDescription : content.description ? content.description : 'not_available' | translate}}</td>
            </tr>
            <tr>
                <td class="bold">{{'url' | translate}}</td>
                <td>
                    <span ng-if="content.url">
                        <a href="{{content.url}}" target="_blank">{{content.url}}</a>
                    </span>
                    <span ng-if="!content.url">
                        {{'not_available' | translate}}
                    </span>
                </td>
            </tr>
        </table>
    </script>
    <div ng-if="!selectedProgram && registrationMode === 'REGISTRATION'">
        <h2>
            {{'register'| translate}}
            <select
            style="height:30px;margin-left:10px;"
            name="trackedEntityTypeSelect"
            ng-model="trackedEntityTypes.selected"
            ng-options="trackedEntityType.displayName for trackedEntityType in trackedEntityTypes.writable | orderBy: 'displayName'"                               
            ng-change="setTrackedEntityType()"
            >
            <option ng-attr-value="" disabled selected> </option>
        </select> 
        </h2> 
    </div>
    <!--registration form starts -->
    <div ng-class="registrationMode === 'REGISTRATION' ? 'col-sm-7' : 'col-sm'">    
        <form name="outerForm" novalidate> 

            <!--custom registration form begins -->
            <div class="vertical-spacing" ng-if="customRegistrationFormExists">
                <!-- enrollment and incidence dates begin -->
                <div ng-if="selectedProgram && !customRegistrationForm.hasProgramDate && registrationMode !== 'PROFILE'">
                    <div ng-include="'components/registration/enrollment-dates-form.html'"></div>
                </div>
                <!-- enrollment and incidence dates end -->
                <div ng-include="'components/registration/custom-registration-form.html'"></div>

            </div>
            <!-- custom registration form ends -->

            <!-- default registration form begins -->
            <div class="vertical-spacing" ng-if="!customRegistrationFormExists">
                <div ng-if="selectedProgram && registrationMode !== 'PROFILE'" ng-include="'components/registration/enrollment-dates-form.html'"></div>
                <div ng-include="'components/registration/default-registration-form.html'"></div>            
            </div>
            <!-- default registration form ends -->
        </form>
        <!--registration form ends -->

        <!-- data entry form starts -->
        <form name="outerDataEntryForm" novalidate>
            <div ng-if="registrationAndDataEntry">            
                <div class="section-label section-spacing vertical-spacing">
                    {{'data_entry'| translate}}
                </div>
                <div ng-include="'components/dataentry/event-details.html'"></div>
                <div class="clear vertical-spacing" ng-if="customDataEntryForm" ng-include="'components/dataentry/custom-dataentry-form.html'"></div>
                <div class="clear vertical-spacing" ng-if="!customDataEntryForm" ng-include="'components/dataentry/default-form.html'"></div>
            </div>    
        </form>    
        <!-- data entry form ends -->

        <!-- registration buttons begin -->
        <div ng-if="!editingDisabled && registrationMode === 'PROFILE' && hasTeiWrite()" class="vertical-spacing btn-group">
            <button type="button" class="btn btn-primary" ng-disabled="saveAttributedDisabledButton()" ng-click="registerEntity(null)">{{'save'| translate}}</button>
            <button type="button" class="btn btn-default small-horizontal-spacing" ng-disabled="saveAttributedDisabledButton()" ng-click="cancelRegistrationWarning(cancel)" ng-if="!isInDashboard">{{'cancel'| translate}}</button>
            <button type="button" class="btn btn-default small-horizontal-spacing" ng-disabled="saveAttributedDisabledButton()" ng-click="cancelRegistrationWarning(cancel, isInDashboard)" ng-if="isInDashboard">{{'cancel'| translate}}</button>
        </div>

        <div class="vertical-spacing btn-group" ng-if="registrationMode === 'ENROLLMENT'">            
            <button type="button" class="btn btn-primary" ng-disabled="model.savingRegistration || selectedOrgUnit.closedStatus" ng-click="registerEntity('ENROLLMENT')">{{'enroll'| translate}}</button>
            <button type="button" class="btn btn-default small-horizontal-spacing" ng-disabled="model.savingRegistration || selectedOrgUnit.closedStatus" ng-click="cancelRegistrationWarning(showNewEnrollment)">{{'cancel'| translate}}</button>
            <span ng-show="model.savingRegistration" style="margin-left: 25px;"><i class="fa fa-spinner fa-spin fa-3x"></i></span>
        </div>

        <div class="vertical-spacing hideInPrint btn-group" ng-if="showRegistrationButtons()">
            <button type="button" ng-disabled="model.savingRegistration || selectedOrgUnit.closedStatus || validatingRegistration" class="btn btn-primary" ng-click="processRegistration('DASHBOARD')">{{'save_and_continue'| translate}}</button>
            <button type="button" ng-disabled="model.savingRegistration || selectedOrgUnit.closedStatus || validatingRegistration" class="btn btn-success" ng-click="processRegistration('SELF')">{{'save_and_add_new'| translate}}</button>  
            <button type="button" class="btn btn-info" onclick="javascript:window.print()">{{'print_form'| translate}}</button>
            <button type="button"  ng-disabled="model.savingRegistration || validatingRegistration" class="btn btn-default" ng-click="setCurrentView(null)">{{'cancel'| translate}}</button>
            <i ng-if="model.savingRegistration || validatingRegistration" class="fa fa-spinner fa-spin" style="font-size:28px;margin-left:15px"></i>
        </div>

        <div class="vertical-spacing hideInPrint" ng-if="showTetRegistrationWarning()">
            <div class="alert alert-warning">{{"tracked_entity_type_has_no_attributes" | translate}}</div>
        </div>

        <!-- registration buttons end -->

        <div class="hideInPrint col-md-12 registration-warning" ng-if="warningMessages.length > 0" ng-class="{true: 'col-sm-4'} [registrationMode === 'REGISTRATION']">
            <div ng-include="'views/warnings.html'"></div>
        </div>
    </div>   
    <div>
        <div ng-if="registrationMode === 'REGISTRATION'" ng-hide="!matchingTeisCount || matchingTeisCount === 0 || hideMatchingTeis" class="col-sm-5 vertical-spacing hidden-xs">
            
            <div class="alert alert-info vertical-spacing" style="position: fixed; width:230px; top: 200px">
                <span class="fa fa-times" style="position:absolute; right:3px;top:3px;cursor:pointer" ng-click="hideMatchingTeis = !hideMatchingTeis"></span>
                <div class="row small-vertical-spacing">
                    <div class="col-md-12">
                        <strong>{{'possible_duplicates_found' | translate}}</strong>
                    </div>
                    
                </div>
                <div class="row" style="margin-top: 10px">
                    <div class="col-md-12">
                        <button class="btn btn-default pull-right" ng-click="showMatchesModal(false)">{{translateWithMatchingTeisLength('view_x_candidates', 'view_candidate')}}</button>
                    </div>

                </div>
              </div>
        </div>
    </div>
</div>
